import Autoplay from "embla-carousel-autoplay"
import * as React from "react"

import { Card, CardContent } from "~/registry/default/ui/card"
import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
} from "~/registry/default/ui/carousel"

export default function CarouselPlugin() {
   const plugin = React.useRef(
      Autoplay({ delay: 2000, stopOnInteraction: true }),
   )

   return (
      <Carousel
         plugins={[plugin.current]}
         className="w-full max-w-xs"
         onMouseEnter={plugin.current.stop}
         onMouseLeave={plugin.current.reset}
      >
         <CarouselContent>
            {Array.from({ length: 5 }).map((_, index) => (
               <CarouselItem key={index}>
                  <div className="p-1">
                     <Card>
                        <CardContent className="flex aspect-square items-center justify-center p-6">
                           <span className="text-4xl font-semibold">
                              {index + 1}
                           </span>
                        </CardContent>
                     </Card>
                  </div>
               </CarouselItem>
            ))}
         </CarouselContent>
         <CarouselPrevious />
         <CarouselNext />
      </Carousel>
   )
}
